@page "/blog/practical-css-tips-for-developers"

<Seo Canonical="/blog/practical-css-tips-for-developers" Title="Practical CSS Tips For Developers" Description="In this blog post we will learn some practical tips for applying custom CSS to Blazor and Blazorise components." ImageUrl="/img/blog/2022-08-31/css.png" />

<BlogPageImage Source="/img/blog/2022-08-31/css.png" Text="" />

<BlogPageTitle>
    Practical CSS Tips For Developers
</BlogPageTitle>

<BlogPageParagraph>
    <Anchor To="https://developer.mozilla.org/en-US/docs/Web/CSS" Title="Link to Cascading Style Sheet">Cascading Style Sheet</Anchor>, the beauty behind the web, friend to some, a devil to many but a necessary evil. Cascading Style Sheets, at their root, are intended to separate the style of a webpage from the content.
</BlogPageParagraph>

<BlogPageParagraph>
    Whether you are using Blazorise with <Anchor To="https://bootstrapdemo.blazorise.com/" Title="Link to Bootstrap">Bootstrap</Anchor>, <Anchor To="https://bulmademo.blazorise.com/" Title="Link to Bulma">Bulma</Anchor> or <Anchor To="https://antdesigndemo.blazorise.com/" Title="Link to AntDesign">AntDesign</Anchor>, CSS will be a huge part of your job.
</BlogPageParagraph>

<BlogPageParagraph>
    Fortunately, here are some great CSS tips for developers.
</BlogPageParagraph>

<BlogPageSubtitle>
    Center anything in three lines of code
</BlogPageSubtitle>

<BlogPageParagraph>
    To center one <Code>div</Code> inside another, we make the containing <Code>div</Code> a flex container. Next, set <Code>align-items</Code> to center to perform centering on the block axis, and <Code>justify-content</Code> to center to perform centering on the inline axis.
</BlogPageParagraph>

<BlogPageParagraph>
    In the future, we may be able to center elements without needing to turn the parent into a flex container, as the Box Alignment properties used here are specified to apply to block layout too.
</BlogPageParagraph>

<BlogPageParagraph>
    The CSS <Code>justify-content</Code> property defines how the browser distributes space between and around content items along the main axis of a flex container, and the inline axis of a grid container.
</BlogPageParagraph>

<BlogPageParagraph>
    The CSS <Code>justify-items</Code> property defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.
</BlogPageParagraph>

<BlogPageSourceBlock Code="CSSTipsForDevelopers1" />

<BlogPageSubtitle>
    Resize an image to fit
</BlogPageSubtitle>

<BlogPageParagraph>
    Images can be a tough customer. When you create a container for a div, you usually want an image to fit in without stretching. Luckily, we can achieve that with 4 lines of code.
</BlogPageParagraph>

<BlogPageParagraph>
    Using a <Anchor To="docs/components/card" Title="Link to Blazorise Card Component">Blazorise Card Component</Anchor>, we will demonstrate how we fit an image with 4 lines of code.
</BlogPageParagraph>

<BlogPageSourceBlock Code="CSSTipsForDevelopers2" />

<BlogPageParagraph>
    The <Code>object-fit</Code> CSS property sets how the content of a replaced element, such as an <Code>img</Code> should be resized to fit its container
</BlogPageParagraph>

<BlogPageSourceBlock Code="CSSTipsForDevelopers3" />

<BlogPageSubtitle>
    Truncate text with ellipsis
</BlogPageSubtitle>

<BlogPageParagraph>
    If you have a <Anchor To="docs/components/text" Title="Link to TextEdit">TextEdit</Anchor> or <Anchor To="docs/components/field" Title="Link to FieldLabel">FieldLabel</Anchor> Component, you truncate the text content to limit the number of words so it does not expand beyond a certain limit.
</BlogPageParagraph>

<BlogPageSourceBlock Code="CSSTipsForDevelopers4" />

<BlogPageParagraph>
    <Blockquote>
        Extra tip: You can use a toltip to display additional information that is required by the user. In the demo below, we use a tooltip to demonstrate how you can use the <Anchor To="docs/components/tooltip" Title="Link to Blazorise Tooltip">Blazorise Tooltip</Anchor> component to display additional information, without increasing the size of a widget.
    </Blockquote>
</BlogPageParagraph>

<BlogPageSourceBlock Code="CSSTipsForDevelopers5" />

<BlogPageParagraph>
    When you truncate a text, it means that you make it shorter so that it takes less resources to save or load. The process of truncating text is called Ellipsing and this is usually denoted by 3 dots at the end of the last text.
</BlogPageParagraph>

<BlogPageSubtitle>
    Set limited content in paragraph
</BlogPageSubtitle>

<BlogPageParagraph>
    For a paragraph element, you can set the exact number of texts you want in the paragraph. This is an explicit form of truncating as this is more specific. If you set a paragraph to contain 5 letters, it will contain up to 5 letters and nothing more.
</BlogPageParagraph>

<BlogPageParagraph>
    Using the example from our truncating example, we can set the number of the CVV field to three, as most CVV codes are three digits
</BlogPageParagraph>

<BlogPageSourceBlock Code="CSSTipsForDevelopers6" />

<BlogPageParagraph>
    The <Code>-webkit-line-clamp</Code> CSS property allows limiting of the contents of a block container to the specified number of lines.
</BlogPageParagraph>

<BlogPageSubtitle>
    Conclusion
</BlogPageSubtitle>

<BlogPageParagraph>
    Blazorise is compatible with your favorite CSS frameworks such as <Anchor To="https://bootstrapdemo.blazorise.com/" Title="Link to Bootstrap">Bootstrap</Anchor>, <Anchor To="https://antdesigndemo.blazorise.com/" Title="Link to AntDesign">AntDesign</Anchor> and <Anchor To="https://materialdemo.blazorise.com/" Title="Link to Material">Material</Anchor>. Read our <Anchor To="https://blazorise.com/docs/components" Title="Link to documentation">documentation</Anchor> and learn how you can add Blazorise UI Component to your Blazor project for rapid application development.
</BlogPageParagraph>

<BlogPageParagraph>
    In one of the next blog posts we will show you how to work with the <Anchor To="docs/helpers/utilities" Title="Link to Blazorise Utilities">Blazorise Utilities</Anchor> instead of writing custom CSS rules.
</BlogPageParagraph>

<BlogPagePostInto UserName="James Amattey" ImageName="james" PostedOn="August1 31st, 2022" Read="3 min" />
